<html>
<head>
    <meta charset="UTF-8">
    <title>我的朋友圈</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="main">
<section class="aui-flexView">
	<header class="aui-navBar aui-navBar-fixed">
		<a href="javascript:history.back(-1);" class="aui-navBar-item">
			<i class="icon icon-return"></i>
		</a>
		<div class="aui-center">
			<span class="aui-center-title">{{ title }}</span>
		</div>
		<a href="javascript:;" class="aui-navBar-item" v-on:click="iconShow()">
			<i class="icon icon-player"></i>
			<div class="menu-item" v-if="icon_show">
				<div class="item" go="create">
					<i class="icon icon-talk-create"></i>
					<span class="plt-8">创建群聊</span>
				</div>
				<div class="item" @click="goto('add.html')">
					<i class="icon icon-talk-add"></i>
					<span class="plt-8">加好友/群</span>
				</div>
			</div>
		</a>
	</header>
	<section class="aui-scrollView" style="background-color: #f9f9f9">
	   <div class="search-box">
	   <!-- 用户检索 -->
		   <div class="search-input" contenteditable="true">
		   		搜索
		   </div>
		   <div class="user-item-cancal-btn cancel hide" style="font-size: 12px; line-height: 27px">取消</div>
		   <div class="search-items hide" v-for="item in searchList" :key="item.id">
		   		<a href=""><div class="user-item">
		   			<div class="user-item-headpic">
		   				<img class="search-avator" :src="item.url" :alt="item.url"/>
		   			</div>
		   			<div class="user-item-username">
		   				{{item.name}}
		   			</div>
		   			<div class="user-item-cancal-btn cancel">
		   				×
		   			</div>
		   		</div></a>
		   </div>
	   </div>
	   <div class="divHeight" v-if="groupList.length > 0"></div>
	   <div class="menu-header" v-if="groupList.length > 0" >我的消息</div>
	   <div class="friend-list" v-if="groupList.length > 0" v-for="group in groupList" :key="group.id">
	   		<div class="friend-items">
	   			<a :href="group.type == 'control'?'message.html':'#'"><div class="friend-item">
	   				<div class="friend-item-headpic">
		   				<img class="friend-avator" :src="group.headerUrl" :alt="group.headerUrl"/>
		   			</div>
		   			<div class="friend-item-info">
		   				<div class="name">{{ group.name }}</div>
		   				<div class="friend-message">{{ group.message }}</div>
		   			</div>
		   			<div class="friend-item-cancal-btn">
		   				<div class="newdate">{{ group.date }}</div>
		   				<div class="numberBall" v-if="group.number > 0"><span>{{ group.number }}</span></div>
		   			</div>
	   			</div></a>
	   		</div>
	   </div>
	   <div class="divHeight" v-if="friendList.length > 0"></div>
	   <div class="menu-header" v-if="friendList.length > 0">我的好友</div>
	   <div class="friend-list" v-if="friendList.length > 0" v-for="item in friendList" :key="item.id">
	   <!-- 好友列表 -->
	   		<div class="friend-items">
	   			<div class="friend-item">
	   				<div class="friend-item-headpic">
		   				<img class="friend-avator" :src="item.avator" :alt="item.avator"/>
		   			</div>
		   			<div class="friend-item-info">
		   				<div class="name">{{ item.nickName ? item.nickName: item.username }}</div>
		   				<div class="friend-message">{{ item.message }}</div>
		   			</div>
		   			<div class="friend-item-cancal-btn">
		   				<div class="newdate">{{ item.requestDate }}</div>
		   				<div class="numberBall" v-if="item.number > 0"><span>{{ item.number }}</span></div>
		   			</div>
	   			</div>
	   		</div>
	   </div>
	</section>
	<footer class="aui-footer aui-footer-fixed">
		<a href="../home/" class="aui-tabBar-item">
            <span class="aui-tabBar-item-icon">
                <i class="icon icon-loan"></i>
            </span>
			<span class="aui-tabBar-item-text">首页</span>
		</a>
		<a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-active">
            <span class="aui-tabBar-item-icon">
                <i class="icon icon-credit"></i>
            </span>
			<span class="aui-tabBar-item-text">消息</span>
		</a>
		<a href="javascript:;" class="aui-tabBar-item ">
            <span class="aui-tabBar-item-icon">
                <i class="icon icon-ions"></i>
            </span>
			<span class="aui-tabBar-item-text">资讯</span>
		</a>
		<a href="../content/personal/" class="aui-tabBar-item ">
            <span class="aui-tabBar-item-icon">
                <i class="icon icon-meTo"></i>
            </span>
			<span class="aui-tabBar-item-text">我的</span>
		</a>
	</footer>
</section>
</div>
<script src="js/util.js"></script>
<script src="js/chat.js"></script>
</body>
</html>